var data1;
var data_length
var id_arr = [];
var roll_arr = [];
var pitch_arr = [];
var yaw_arr = [];
var time_arr = [];
var time_new_date = [];

function data_clear() {
    roll_arr.length = 0;
    pitch_arr.length = 0;
    yaw_arr.length = 0;
    time_arr.length = 0;

}

// //日期选择器1
// // 初始化日期范围选择器
// $(document).ready(function () {
//     $('#dateRange').daterangepicker({
//         autoUpdateInput: false,
//         locale: {
//             cancelLabel: 'Clear'
//         }
//     });
//
//     // 清除日期范围选择器的默认值
//     $('#dateRange').on('apply.daterangepicker', function (ev, picker) {
//         $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
//
//         console.log('日期选择器1-开始日期' + picker.startDate.format('YYYY-MM-DD'));
//         console.log('日期选择器1-结束日期' + picker.endDate.format('YYYY-MM-DD'));
//
//         // 发送 AJAX 请求到后端
//         $.ajax({
//             url: '/get_time_slot', // 后端处理数据的接口地址
//             method: 'POST',
//             data: {
//                 start_date: picker.startDate.format('YYYY-MM-DD'),
//                 end_date: picker.endDate.format('YYYY-MM-DD')
//             },
//             success: function (data) {
//                 //调试看数据库的数据是否过来了
//                 data_clear();
//                 console.log(data)
//                 data_length = data.length;
//                 for (i = 0; i < data_length; i++) {
//                     id_arr.push(data[i].id);
//                     roll_arr.push(data[i].roll);
//                     pitch_arr.push(data[i].pitch);
//                     yaw_arr.push(data[i].yaw);
//                     // 这样做会导致时间差8小时，具体原因未知，之前也试过了，明明使用的是本地的时间格式，时间仍然差8小时
//                     //time_arr.push(data[i].time);
//                     //因此这里采取手动拼接的方式获得正确的时间字符串
//                     const get_date_string = data[i].time + '+0800 (中国标准时间)';
//                     time_new_date[i] = new Date(get_date_string);
//
//                     time_arr.push([
//                         time_new_date[i].getFullYear(),
//                         time_new_date[i].getMonth() + 1,
//                         time_new_date[i].getDate(),
//                         time_new_date[i].getHours(),
//                         time_new_date[i].getMinutes(),
//                         time_new_date[i].getSeconds()
//                     ].join('-'));
//                 }
//                 // console.log(id_arr);
//                 // console.log(roll_arr);
//                 // console.log(pitch_arr);
//                 // console.log(yaw_arr);
//                 // console.log(time_arr);
//                 updateTable();
//                 updatePagination();
//
//
//                 // 报表下载，时间不正确时调试用的 strat
//
//                 // const timeSub8 = new Date(data[1].time);
//                 //   console.log('timeSub8' + timeSub8);
//                 //  timeSub8.setHours(timeSub8.getHours() - 8);
//                 //  console.log('timeSub8减去8小时' + timeSub8);
//                 // // console.log('timeSub8.toISOString()'+timeSub8.toISOString());
//                 // // console.log('timeSub8.toISOString()正则'+timeSub8.toISOString().replace(/[\s,\/]/g, '-'));
//                 // console.log('timeSub8.toLocaleString()' + timeSub8.toLocaleString());
//                 // console.log('timeSub8.toLocaleString()正则' + timeSub8.toLocaleString().replace(/[\s,\/]/g, '-'));
//
//                 // //方法2
//                 // var loacl_time_str = data[1].time +'+0800 (中国标准时间)';
//                 // console.log('data.time原始时间字符串'+ loacl_time_str);
//                 // const real_time_date = new Date(loacl_time_str);
//                 // console.log('拼成的时间字符串的Date对象=='+real_time_date);
//                 // console.log('timeSub8.toLocaleString()' + real_time_date.toLocaleString());
//                 // console.log('timeSub8.toLocaleString()正则' + real_time_date.toLocaleString().replace(/[\s,\/]/g, '-'));
//
//                 // 报表下载，时间不正确时调试用的 end
//                 reporter_download(data);
//             },
//             error: function (error) {
//                 console.error('Error fetching data:', error);
//             }
//         });
//     });
//
//     // 清除日期范围选择器的内容
//     $('#dateRange').on('cancel.daterangepicker', function () {
//         $(this).val('');
//     });
// });


// csdn-双日历选择器

// $('.date_pick').on('click',select_date2());

$('.date_pick').on('click', function () {
    $('input[name="datePicker"]').focus();
});

$('input[name="datePicker"]').daterangepicker({

    // timePicker: true, //显示时间
    //
    // timePicker24Hour: true, //时间制
    //
    // timePickerSeconds: true, //时间显示到秒
    //
    // startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期

    timePicker: false, //显示时间

    timePicker24Hour: false, //时间制

    timePickerSeconds: false, //时间显示到秒

    startDate: moment().startOf('day'),//设置开始日期

    endDate: moment(new Date()), //设置结束器日期

    maxDate: moment(new Date()), //设置最大日期

    "opens": "center",

    //不显示当前的日期
    autoUpdateInput: false,


    ranges: {

        // '今天': [moment(), moment()],

        '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],

        '上周': [moment().subtract(6, 'days'), moment()],

        '前30天': [moment().subtract(29, 'days'), moment()],

        '本月': [moment().startOf('month'), moment().endOf('month')],

        '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]

    },

    showWeekNumbers: true,

    locale: {

        format: "YYYY-MM-DD HH:mm:ss", //设置显示格式

        applyLabel: '确定', //确定按钮文本

        cancelLabel: '取消', //取消按钮文本

        customRangeLabel: '自定义',

        daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],

        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',

            '七月', '八月', '九月', '十月', '十一月', '十二月'

        ],

        firstDay: 1

    },

}, function (start, end, label) {

    timeRangeChange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')];

    var st_date = start.format('YYYY-MM-DD');
    console.log('日期选择器2-开始日期' + st_date);
    var ed_date = end.format('YYYY-MM-DD');
    console.log('日期选择器2-结束日期' + ed_date);

    console.log(timeRangeChange);

    $('input[name="datePicker"]').val(st_date + ' - ' + ed_date);

    // 发送 AJAX 请求到后端
    $.ajax({
        url: '/get_time_slot', // 后端处理数据的接口地址
        type: 'POST',
        data: {
            start_date: st_date,
            end_date: ed_date
        },
        success: function (data) {
            //调试看数据库的数据是否过来了
            data_clear();
            console.log(data)
            data_length = data.length;
            for (i = 0; i < data_length; i++) {
                id_arr.push(data[i].id);
                roll_arr.push(data[i].roll);
                pitch_arr.push(data[i].pitch);
                yaw_arr.push(data[i].yaw);
                // 这样做会导致时间差8小时，具体原因未知，之前也试过了，明明使用的是本地的时间格式，时间仍然差8小时
                //time_arr.push(data[i].time);
                //因此这里采取手动拼接的方式获得正确的时间字符串
                const get_date_string = data[i].time + '+0800 (中国标准时间)';
                time_new_date[i] = new Date(get_date_string);

                time_arr.push([
                    time_new_date[i].getFullYear(),
                    time_new_date[i].getMonth() + 1,
                    time_new_date[i].getDate(),
                    time_new_date[i].getHours(),
                    time_new_date[i].getMinutes(),
                    time_new_date[i].getSeconds()
                ].join('-'));
            }
            // console.log(id_arr);
            // console.log(roll_arr);
            // console.log(pitch_arr);
            // console.log(yaw_arr);
            // console.log(time_arr);
            updateTable();
            updatePagination();
            reporter_download(data);
        },
        error: function (error) {
            console.error('Error fetching data:', error);
        }
    });
});


var rowsPerPage = 5;
var currentPage = 1;

function updateTable() {
    var startIdx = (currentPage - 1) * rowsPerPage;
    var endIdx = startIdx + rowsPerPage;
    var tableBody = $('#tableBody');
    tableBody.empty();

    for (var i = startIdx; i < endIdx && i < data_length; i++) {
        var row = '<tr id="tr' + i + '"><td>' + id_arr[i] + '</td><td>' + roll_arr[i] + '</td><td>' + pitch_arr[i] + '</td><td>' + yaw_arr[i] + '</td><td>' + time_arr[i] + '</td></tr>'

        tableBody.append(row);
    }
}

function updatePagination() {
    var totalPages = Math.ceil(data_length / rowsPerPage);
    var pagination = $('#pagination');
    pagination.empty();

    const pagination_pre = $('<li></li>').attr('id', 'prevPage').append(
        $('<a href="#"></a>').text('上一页')
    );
    pagination_pre.click(function () {
        if (currentPage > 1) {
            setPage(currentPage - 1);
        }
    });
    pagination.append(pagination_pre);

    // 在updatePagination函数中添加以下代码
    var maxVisiblePages = 5; // 设置最大可见页码数
    var startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
    var endPage = Math.min(startPage + maxVisiblePages - 1, totalPages);

    // 添加省略号前的页码
    if (startPage > 1) {
        pagination.append('<li><a href="#">...</a></li>');
    }

    for (var i = startPage; i <= endPage; i++) {
        var li = $('<li></li>').addClass(i === currentPage ? 'active' : '').append(
            $('<a href="#"></a>').text(i)
        );
        li.click(function () {
            setPage(parseInt($(this).text(), 10));
        });
        pagination.append(li);
    }

    // 添加省略号后的页码
    if (endPage < totalPages) {
        pagination.append('<li><a href="#">...</a></li>');
    }

    const pagination_next = $('<li></li>').attr('id', 'nextPage').append(
        $('<a href="#"></a>').text('下一页')
    );
    pagination_next.click(function () {
        var totalPages = Math.ceil(data_length / rowsPerPage);
        if (currentPage < totalPages) {
            setPage(currentPage + 1);
        }
    });
    pagination.append(pagination_next);


    // 在updatePagination函数中添加以下代码
    var totalpage = $('<span></span>').text('总页数：' + totalPages);
    var jumpage = $('<span></span>').text('，请输入需跳转页数：');
    var inputPage = $('<input type="text" id="inputPage" class="form-control">');
    var goButton = $('<button class="btn btn-default jump-btn">跳转</button>');


    goButton.click(function () {
        var targetPage = parseInt(inputPage.val(), 10);
        if (!isNaN(targetPage) && targetPage >= 1 && targetPage <= totalPages) {
            setPage(targetPage);
        }
    });

    pagination.append(totalpage);
    pagination.append(jumpage);
    pagination.append(inputPage);
    pagination.append(goButton);


    $('.pagination .page-number').removeClass('active');
    //eq(n)：找到一组相同元素中索引数为n的元素
    //注意：索引数从0开始计算
    $('.pagination .page-number').eq(currentPage - 1).addClass('active');
    $('#prevPage').toggleClass('disabled', currentPage === 1);
    $('#nextPage').toggleClass('disabled', currentPage === Math.ceil(data_length / rowsPerPage));
}


function setPage(page) {
    currentPage = page;
    updateTable();
    updatePagination();
}


//搜索数据的逻辑
$('#inputTime').keypress(function (e) {
    if (e.which === 13) {
        // 如果按下的是回车键
        var inputTime = $(this).val();
        console.log('输入的时间为: ' + inputTime);
        var index = QuerySelect_Time_index(inputTime);
        //索引从0开始，页数从1开始。页数比索引数大1，所以这里+1  才是真实页数
        var input_in_page = parseInt(index / rowsPerPage, 10) + 1;
        console.log('input_in_page = ' + input_in_page);

        //将页面刷新到所选页面
        currentPage = input_in_page;
        updateTable();
        updatePagination();

        //将对应元素高亮
        highlightDataByTime(index);


    }
});


function QuerySelect_Time_index(input) {
    let index = 0;

    for (var i = 0; i < data_length; i++) {
        if (input == time_arr[i]) {
            index = i;
            break;
        }
    }
    return index;
}


function highlightDataByTime(time_index) {

    $('#tr' + time_index).addClass('danger');

}


//报表下载功能 start

function reporter_download(d) {

    document.getElementById('downloadButton').addEventListener('click', function () {

        // 准备报表数据
        const csvContent = 'id,roll,pitch,yaw,time\n' + d.map(item => {

            //data.time是真实的时间的Date时间字符串 ‘Fri, 10 Nov 2023 11:44:13 GMT’
            // 但是却成为了，格林威治时间字符串，缺少'+0800 (中国标准时间)'，这种字符串拿去直接用会和本地真实时间有时差
            //解决方法1 start：需要先转成 Date对象，然后减去8小时才变成正确时间的时间字符串 ‘Fri, 10 Nov 2023 11:44:13 GMT+0800 (中国标准时间)’
            const timeSub8 = new Date(item.time);
            timeSub8.setHours(timeSub8.getHours() - 8);

            //解决方法1 end

            //解决方法2 start：手动将格林威治时间字符串拼接成本地的时间字符串
            var loacl_time_str = item.time + '+0800 (中国标准时间)';
            const real_time_date = new Date(loacl_time_str);
            //解决方法2 end

            //Date对象解析
            //为了显示出真实的时间如：’2023-11-10-11:44:13‘
            //还需要对 Date对象进行解析，如下
            //toLocaleString()将Date字符串解析 '2023/11/10 11:44:13' 已经可以用了
            //这里提供一种思路，利用正则表达式再将字符串转换成我们想要的格式 ’2023-11-10-11:44:13‘
            const formattedTime = real_time_date.toLocaleString().replace(/[\s,\/]/g, '-');
            return `${item.id},${item.roll},${item.pitch},${item.yaw},${formattedTime}`;
        }).join('\n');
        // 创建 Blob 对象
        const blob = new Blob([csvContent], {type: 'text/csv'});

        // 创建下载链接
        const downloadLink = document.createElement('a');
        downloadLink.href = window.URL.createObjectURL(blob);

        // 设置下载文件的名称
        downloadLink.download = 'report.csv';

        // 添加到页面中并触发点击
        document.body.appendChild(downloadLink);
        downloadLink.click();

        // 移除下载链接
        document.body.removeChild(downloadLink);
    });
}

//报表下载功能 end
